<template>
    <div class="Svip">
        <div class="Svip_head">
            <table>
                <tr>
                    <td  colspan="2" style="text-align: left;background: #ccc;color: #fff" >设置超级会员信息</td>
                </tr>
                <tr>
                    <td>超级会员名称</td>
                    <td style="text-align: left;padding-left:22px"><input type="text" v-model="mess.name" name="" id=""></td>
                </tr>
                <tr>
                    <td>背景色</td>
                    <td style="text-align: left;padding-left:22px"><input type="text" v-model="mess.col" name="" id=""><button @click="huancol()">选择</button></td>
                </tr>
                <tr>
                    <td>图标</td>
                    <td></td>
                </tr>
                <tr>
                    <td>背景图</td>
                    <td></td>
                </tr>
                <tr>
                    <td  colspan="4" style="text-align: left;background: #ccc;color: #fff"  >成为超级会员条件</td>
                </tr>
                <tr>
                    <td>消费额</td>
                    <td style="text-align: left;padding-left:22px"><input type="text"  v-model="mess.xiaofie" name="" id=""></td>
                </tr>
                <tr>
                    <td colspan="4" style="text-align: left;background: #ccc;color: #fff"  >获得权益</td>
                </tr>
                <tr>
                    <td>普通会员佣金</td>
                    <td style="text-align: left;padding-left:22px"><input type="text" v-model="mess.pusvip" name="" id="">%</td>
                </tr>
                <tr>
                    <td>自购省钱</td>
                    <td style="width:90px"><input type="text" v-model="mess.shop" name="" id="">%</td>
                </tr>
                <tr>
                    <td>直推评级分佣</td>
                    <td><input type="text" v-model="mess.ping" name="" id="">%</td>
                </tr>
                <tr style="width:100px">
                    <td>权益说明</td>
                    <td><textarea name="" v-model="mess.quan" id="" cols="30" rows="10"></textarea></td>
                </tr>
            </table>
        </div>
        <div class="Svip_main">
            <el-button type="primary">提交</el-button>
        </div>
        <div class="Svip_foot"></div>
    </div>
</template>

<script>
import Mock from 'mockjs'
export default {
    data() {
        return {
            mess:{
                name:"",
                col:"",
                biao:"",
                biejing:"",
                xiaofie:"",
                pusvip:"",
                shop:"",
                ping:"",
                quan:""
            }
        }
    },
    methods: {
        //点击选择切换背景颜色
        huancol(){
            const lis=Mock.mock({
                col:"@color"
            })
            this.mess.col=lis.col
            
        }
    },
}
</script>

<style>
.Svip{
    width: 100%;
    height: 100%;
}
table{
    text-align: center;
    width: 50%;
    border: 1px solid #000;
    border-collapse: collapse;
}
table>tr>td{
    border: 1px solid #000;
}
.Svip_main{
    text-align: center;
    margin-top: 30px;
}
.Svip_main>button{
    width: 100px;
}
</style>